<template>
  <div v-if="visible" class="IntegrationCenterToast">
    <div class="toast-body">
      <img class="icon" :src="icon" alt="" />
      <div class="text">{{ msgText }}</div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import { reqUserPointTaskFinished } from '@/api/IntegrationCenter/index';

  export default {
    name: 'IntegrationCenterToast',
    props: {
      icon: {
        type: String,
        default: 'https://image.doulaoban.com/applet/image/1730280121008_1.png',
      },
      msgText: {
        type: String,
        default: '任务已完成，快去积分中心领取相应积分吧～',
      },
    },
    data() {
      return {
        visible: false,
        timer: null,
      };
    },
    computed: {
      ...mapState('login', ['userInfo']),
      // 是否为机构用户
      isCompanyUser() {
        return this.userInfo.is_company_user === 1;
      },
    },
    methods: {
      // 上报完成积分任务
      async reportPointTaskFinished() {
        if (!this.userInfo.id) {
          return;
        }
        const taskId = '9';
        try {
          const payload = {
            id: taskId,
            source_id: 1,
          };
          await reqUserPointTaskFinished(payload);
          if (this.isCompanyUser) {
            this.open();
          }
          return Promise.resolve();
        } catch (error) {
          return Promise.reject();
        }
      },
      open() {
        this.visible = true;
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.onClose();
        }, 2000);
      },
      onClose() {
        this.visible = false;
      },
    },
  };
</script>

<style lang="less" scoped>
  .IntegrationCenterToast {
    position: fixed;
    top: 25%;
    left: 50%;
    z-index: 999999;
    transform: translate(-50%, -50%);

    .toast-body {
      display: flex;
      align-items: flex-start;
      padding: 10px 16px;
      background: rgba(33, 33, 33, 0.8);
      border-radius: 4px;

      .icon {
        display: block;
        width: 18px;
        height: 18px;
      }

      .text {
        width: 280px;
        margin-left: 8px;
        font-size: 14px;
        line-height: 18px;
        color: #fff;
      }
    }
  }
</style>
